<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>08_事件操作-常见的其他事件</title>
</head>
<body>

  <ul id="list" class="panel">
    <li class="li-1">li-1</li>
    <li class="li-2">li-2</li>
    <li class="li-3">li-3</li>
    <li class="li-4">li-4</li>
    <li class="li-5">li-5</li>
  </ul>

  <input type="text">

  <script src="../libs/jquery-3.6.0.js"></script>
  <script>
    $(function () {
      // 1. blur() 失去焦点
      $('input').blur(function () {
        console.log('失去焦点');
      })

      // 2. focus() 获取焦点
      $('input').focus(function () {
        console.log('获取焦点');
      })

      // 3. change() 内容改变
      $('input').change(function () {
        console.log('内容改变');
      })

      // 4. select() 选中
      $('input').select(function () {
        console.log('选中');
      })

      // 5. submit() 提交
      $('form').submit(function () {
        console.log('提交');
      })

      // 6. keydown() 按下
      $('input').keydown(function () {
        console.log('按下');
      })

      // 7. keyup() 松开
      $('input').keyup(function () {
        console.log('松开');
      })

      // 8. keypress() 按下并松开
      $('input').keypress(function () {
        console.log('按下并松开');
      })

      // 9. input ( debounce 防抖操作 )
      $('input').on('input', function() {
        //  console.log( $('input').val() )
        console.log( $(this).val() )
      })
    })

  </script>
  
</body>
</html>